<template>
  <div>
    <h1>Designer</h1>
    <h2 @click="goIndex">Logo</h2>
    <micro-app style="flex: 1" :name="state.module" :url="state.url" iframe></micro-app>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useBaseStore } from '@/stores/base'
import { platforms, type Platform } from '@/mock'

const baseStore = useBaseStore()
const router = useRouter()
const goIndex = () => {
  router.push('/')
}
const state = reactive({
  module: '',
  url: ''
})
watch(
  () => baseStore.getPlatformActive(),
  (value) => {
    const _active = platforms.filter((platform) => platform.routerView === value?.routerView)
    if (_active.length) {
      // 兼容处理从子应用切换过来的情况
      _active.forEach((item: Platform) => {
        state.module = item.code
        state.url = item.url
      })
    } else {
      state.module = value?.module
      state.url = value?.url
    }
  },
  {
    immediate: true,
    deep: true
  }
)
</script>

<style lang="scss" scoped></style>
